<template>
  <div class="work_menu">
    <el-menu
      router
      class="leftPart"
      :default-openeds="defaultOpeneds"
      :collapse-transition="false"
      :default-active="activeIndex"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/footer">尾页</el-menu-item>
      <el-menu-item index="/indexdb">浏览器数据库</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "WorkMenu",
  data() {
    return {
      menuTree: [],
      defaultOpeneds: [],
      activeIndex: "/home"
    };
  },
  watch: {
    $route(to, from) {
      this.activeIndex = to.path;
    }
  },
  created(){
    this.activeIndex = this.$route.path;
  },
  methods: {}
};
</script>
<style scoped lang="less">
.work_menu {
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  position: relative;
  background-color: aquamarine;
}

.work_menu {
  -o-user-select: none;
  -moz-user-select: none; /*火狐 firefox*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10+*/
  -khtml-user-select: none; /*早期的浏览器*/
  user-select: none;
}

el-menu-item-group {
  position: relative;
}

.i_style i {
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 8px;
}

.leftPart {
  border-right: 0px;
}

.collmin {
  min-width: 15em;
  border: 1px solid #dddddd;
  min-height: 100%;
  box-sizing: border-box;
}

.show-menu {
  z-index: 10;
  line-height: 60px;
  position: absolute;
  top: 48%;
  right: 0;
  width: 14px;
  height: 60px;
  opacity: 0.7;
  background-color: #888;
  color: #fff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.leftPart /deep/ .el-submenu:not(:first-child),
.leftPart /deep/ .el-menu-item {
  border-bottom: 1px solid #dddddd;
}

.el-menu-item i,
.el-submenu__title i {
  /* color: #f52323; */
}

/deep/ .el-menu-item,
/deep/ .el-submenu__title {
  height: 45px;
  line-height: 45px;
}
.el-menu-item.is-active{
  background:burlywood;
}
.el-menu-item.is-active:hover{
  background:burlywood;
}
</style>
